<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item v-breadcrumb-certify></el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content search_form teacher_plan">
      <e-cellbox middle class="title-manage">
        <e-cell-item>
          <e-heading grade='1'>{{`${classname}《${planData.length && planData[0].subjectName}》${title}`}}</e-heading>
        </e-cell-item>
        <e-cell-item class="tr small weak">
          <!-- <el-button type="default">导出大纲</el-button> -->
          <!-- <el-button type="text" :class="['edit_ico', {planbtn_normal: isEdit}]" icon="edit" @click="handleEdit">编辑</el-button> -->
        </e-cell-item>
      </e-cellbox>
      <h4 class="plan_title">教学目标</h4>
      <div class="info_content">
        <div class="info-text" v-html="teachTarget"></div>
        <div class="form-help" v-if="!teachTarget">点击编辑，输入教学目标</div>
        <el-button type="text" class="edit-btn" @click="handleToggleDialog()">编辑</el-button>
      </div>
      <el-dialog class="target-dialog-wrapper"
        :visible.sync="dialogConfig.visible"
        :title="dialogConfig.title">
        <el-input v-model="dialogConfig.info" :maxlength="100" type="textarea" :rows="5" number-word />
        <div class="tdialog-footer">
          <el-button type="default" @click="handleToggleDialog()">取消</el-button>
          <el-button type="success" @click="handleDialogSave($event)">确定</el-button>
        </div>
      </el-dialog>
      <h4 class="plan_title" style="margin-top:20px;">课时列表</h4>
      <div class="plan_list" v-loading="loading">
        <el-row v-for="(item, index) in planData" :key="index" :class="{is_editico: item.isEdited}">
          <!-- 如果有主题名称 则用主题名称 没有则用课时名称 -->
          <el-col :span="18"><div :class="[{is_edit: item.isEdited}, 'link_ico']" @click="goPlanShow(item.id, item.topicName || item.subjectName)">课时{{index + 1}}：{{item.topicName || item.subjectName}}</div></el-col>
          <el-col :span="6"><div class="coach">教练：{{item.teacherName}}</div></el-col>
        </el-row>
      </div>
    </div>  
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import trainApi from 'api/train'
import InfoEdit from './components/InfoEdit'
import { formatTextrea } from 'utils'
export default {
  components: {
    InfoEdit
  },
  computed: {
    ...mapGetters({
      train_teacher_info: 'train_teacher_info'
    }),
    classname () {
      return this.$route.query.classname
    },
    classid () {
      return this.$route.query.classid
    }
  },
  created () {
    this.initData()
  },
  data () {
    return {
      title: '训练大纲',
      loading: true,
      dialogConfig: {
        visible: false, // dialog状态
        title: '编辑教学目标',
        info: ''
      },
      teachTarget: '', // 教学目标
      planData: [],
      activeTab: 'analysis'
    }
  },
  methods: {
    goPlanShow: function (id, subjectName) {
      this.$router.push({path: '/training/class/program/plan', query: {id, subjectName}})
    },
    initData: function () {
      // 获取教学目标
      trainApi.getDrillInfo({classId: this.classid}).then(({data = {}}) => {
        this.teachTarget = data.objective || ''
        this.dialogConfig.id = data.id // 编辑使用
        this.dialogConfig.info = this.teachTarget.replace(/<br\s*\/?>/g, '\n')
      })
      // 获取课时列表
      trainApi.getSchemeClasslist({classId: this.$route.query.classid}).then((res) => {
        this.planData = res.data
        this.loading = false
      })
    },
    handleToggleDialog () {
      this.dialogConfig.visible = !this.dialogConfig.visible
    },
    handleDialogSave (event) {
      // 教学目标弹窗保存
      let subData = {}
      subData.id = this.dialogConfig.id || ''
      subData.classId = this.classid
      subData.objective = formatTextrea(this.dialogConfig.info)
      trainApi.saveDrillInfo(subData, {context: event.target, successMsg: '教学目标保存成功'}).then((res) => {
        this.dialogConfig.id = res.data // 更新本地数据 用于编辑
        this.teachTarget = subData.objective // 更新本地数据
        this.handleToggleDialog()
      })
    }
  }
}
</script>
<style lang="scss">

.teacher_plan{
  .title-manage {
    margin-top: -25px;
  }
  .info_content{
    position: relative;
    padding:20px;
    height: 170px;
    background-color: $color-background-base;
    .edit-btn{
      position: absolute;
      min-width: 60px;
      bottom: 0;
      right: 0;
    }
  }
  .target-dialog-wrapper{
    .tdialog-footer{
      margin-top:40px;
      text-align: center;
    }
  }
  .edit_ico{
    background: #fff;
    border:none;
    color:#3983e5;
  }
  .planbtn_normal{
    color:#999;
  }
  h4.plan_title{
    font-size: 16px;
    font-weight:normal;
    margin-bottom:15px;
  }
  .info_show{
    line-height:1.8;
    color:#666;
    margin-bottom: 60px;
    word-wrap:break-word;
  }
  .plan_list{
    .el-row{
      padding:20px 0;
      border-bottom:1px solid #efefef;
      position: relative;
    }
    ::before{
      position: absolute;
      top:28px;
      width:6px;
      height:6px;
      border-radius: 50%;
      background: #ccc;
    }
    .is_editico{
      &::before{
        background: #00bb90; 
      }   
    }
    .link_ico{
      text-indent: 20px;
      color:#666;
      overflow:hidden; //超出的文本隐藏 
      text-overflow:ellipsis; //溢出用省略号显示 
      white-space:nowrap; //溢出不换行
      &:hover{
        cursor:pointer;
        color: $color-link;
      }
    }
    .is_edit{
      color:#333;
    }
    .coach{
      text-align: right;
      font-size:12px;
      color:#999999;
      overflow:hidden; //超出的文本隐藏 
      text-overflow:ellipsis; //溢出用省略号显示 
      white-space:nowrap; //溢出不换行
    }
  }
}
</style>
